<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<essay title="南京 x地发生xxxx事件" time="2024-11-29"></essay>
			<essay title="BBB"></essay>
			
			<h1>学生信息</h1>
			<table>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<student v-for="stu in stus" :id="stu.id" :name="stu.name" :age="stu.age"></student>
			</table>
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						"message":"Hello Vue!",			
						"stus":[
							{id:101,name:'张三',age:18,},
							{id:102,name:'李四',age:19,},
							{id:103,name:'王五',age:20,},
						]
						
					}
				}
			});
			
			app.component("essay",{
				// data(){
					
				// },
				template:"<div><h2>标题:{{title}}{{time}}<h2></div>",
				props:["title","time"]
			});
			
			app.component("student",{
				template:"<tr><td>{{id}}</td><td>{{name}}</td><td>{{age}}</td></tr>",
				props:['id','name','age']
			});
			
			
			var vm = app.mount("#app")	
		</script>
	</body>
</html>
